<template>
  <div class="my">
    <div class="header" v-if="userInfo">
      <img  class="ava" :src="userInfo.avatarUrl" alt="">
      <div class="name">{{userInfo.nickName}}</div>
    </div>
     <div class="header" v-else @tap="login">
      <img  class="ava" src="/static/images/icon/tou.png" alt="">
      <div class="name">点击登陆</div>
    </div>
    <div class="about" hover-class="hoverc" @tap="goAbout">
      <div class="l">公告</div>
      <img class="r" src="/static/images/icon/right.png" alt="">
    </div>
    <div class="cang">
      <div class="cheader">我的收藏</div>
      <p-list :plist="plist" :myColl="myColl"></p-list>
    </div>
    <p-login></p-login>
  </div>
</template>
<script>
import pLogin from "@/components/login";
import pList from "@/components/plist";
import { mapState, mapActions } from "vuex";
import config from "@/utils/config";
export default {
  components: {
    pList,
    pLogin
  },
  data() {
    return {
      plist: [],
      myColl: true
    };
  },
  computed: {
    ...mapState(["userInfo"])
  },
  methods: {
    login() {
      this.$store.state.actionSheetShow = true;
    },
    goAbout() {
      wx.navigateTo({
        url: "/pages/about/main"
      });
    }
  },
  onShow() {
    this.$store.state.more = true;
    let collections = wx.getStorageSync("collections");
    let list = [];
    for (let i = 0; i < collections.length; i++) {
      collections[i].productsDetail.image =
        config.imageUrl + collections[i].productsDetail.image;
      list.push(collections[i].productsDetail);
    }
    this.plist = list;
  },
  async mounted() {
    let userInfo = wx.getStorageSync("userInfo");
    if (!userInfo) {
      this.$store.state.actionSheetShow = true;
    }
    this.$store.state.userInfo = userInfo;
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/varibles.scss";
.my {
  .header {
    height: 300rpx;
    line-height: 300rpx;
    background: linear-gradient(to right, red, blue); /* 标准的语法 */

    img {
      position: absolute;
      left: 50rpx;
      top: 80rpx;
      width: 140rpx;
      height: 140rpx;
      border-radius: 50%;
    }
    .name {
      padding-left: 230rpx;
      display: inline-block;
      font-size: $fontSize5;
      color: #fff;
    }
  }
  .hoverc {
    background: rgba(0, 0, 0, 0.2);
  }
  .about {
    border-top: 20rpx solid $borderColor;
    position: relative;
    height: 70rpx;
    line-height: 70rpx;
    padding-left: 20rpx;
    .l {
      float: left;
      font-size: $fontSize4;
    }
    .r {
      width: 40rpx;
      height: 40rpx;
      float: right;
      margin-top: 15rpx;
      margin-right: 20rpx;
    }
  }
  .cang {
    border-top: 20rpx solid $borderColor;
    .cheader {
      padding: 20rpx;
      font-size: $fontSize4;
      border-bottom: 1rpx solid $borderColor;
    }
  }
}
</style>

